<template>
	<om-page :title="pageTitle">
		<view class="desc-chart om-btn-color">
			<view class="allchart"><a @click="searchHandle">查询</a></view>
		</view>
		<!-- <ot-sl-filter :ref="'slFilter'" :topFixed="true" :menuList="filterList" @result="onChangeFilter" /> -->
		<view class="nodata" v-show="dataList.length == 0 && dataStatus">{{ '暂无数据！' }}</view>
		<view class="page__bd" style="margin-top: 51px;">
			<uni-list>
				<view v-for="(item, index) in dataList" :key="index">
					<uni-list-item
						:title="'姓名：'+item.userName"
						:avatar="index + 1"
						:avatarBgColor="calcBgColor(item)"
						@click="getoLink(item)"
					>
					 <view slot="note">
						<view style="height: 24px; line-height: 24px;">计酬岗位：<text class="">{{item.salaryPosName}}</text></view>
						<view style="height: 24px; line-height: 24px;">机构名称：<text class="">{{item.instName}}</text></view>
						<view style="height: 24px; line-height: 24px;">年度：<text class="">{{item.year}}</text></view>
						<view style="height: 32px; line-height: 32px;">
							<view class="desw">1月：{{item.data1}}</view>
							<view v-show="item.data1" class='radius light bg-blue zbbtn' @click.stop="openPopup(item,1)" style="text-align: center;">明细</view>
						</view>
						<view style="height: 32px; line-height: 32px;">
							<view class="desw">2月：{{item.data2}}</view>
							<view v-show="item.data2" class='radius light bg-blue zbbtn' @click.stop="openPopup(item,2)" style="text-align: center;">明细</view>
						</view>
						<view style="height: 32px; line-height: 32px;">
							<view class="desw">3月：{{item.data3}}</view>
							<view v-show="item.data3" class='radius light bg-blue zbbtn' @click.stop="openPopup(item,3)" style="text-align: center;">明细</view>
						</view>
						<view style="height: 32px; line-height: 32px;">
							<view class="desw">4月：{{item.data4}}</view>
							<view v-show="item.data4" class='radius light bg-blue zbbtn' @click.stop="openPopup(item,4)" style="text-align: center;">明细</view>
						</view>
						<view style="height: 32px; line-height: 32px;">
							<view class="desw">5月：{{item.data5}}</view>
							<view v-show="item.data5" class='radius light bg-blue zbbtn' @click.stop="openPopup(item,5)" style="text-align: center;">明细</view>
						</view>
						<view style="height: 32px; line-height: 32px;">
							<view class="desw">6月：{{item.data6}}</view>
							<view v-show="item.data6" class='radius light bg-blue zbbtn' @click.stop="openPopup(item,6)" style="text-align: center;">明细</view>
						</view>
						<view style="height: 32px; line-height: 32px;">
							<view class="desw">7月：{{item.data7}}</view>
							<view v-show="item.data7" class='radius light bg-blue zbbtn' @click.stop="openPopup(item,7)" style="text-align: center;">明细</view>
						</view>
						<view style="height: 32px; line-height: 32px;">
							<view class="desw">8月：{{item.data8}}</view>
							<view v-show="item.data8" class='radius light bg-blue zbbtn' @click.stop="openPopup(item,8)" style="text-align: center;">明细</view>
						</view>
						<view style="height: 32px; line-height: 32px;">
							<view class="desw">9月：{{item.data9}}</view>
							<view v-show="item.data9" class='radius light bg-blue zbbtn' @click.stop="openPopup(item,9)" style="text-align: center;">明细</view>
						</view>
						<view style="height: 32px; line-height: 32px;">
							<view class="desw">10月：{{item.data10}}</view>
							<view v-show="item.data10" class='radius light bg-blue zbbtn' @click.stop="openPopup(item,10)" style="text-align: center;">明细</view>
						</view>
						<view style="height: 32px; line-height: 32px;">
							<view class="desw">11月：{{item.data11}}</view>
							<view v-show="item.data11" class='radius light bg-blue zbbtn' @click.stop="openPopup(item,11)" style="text-align: center;">明细</view>
						</view>
						<view style="height: 32px; line-height: 32px;">
							<view class="desw">12月：{{item.data12}}</view>
							<view v-show="item.data12" class='radius light bg-blue zbbtn' @click.stop="openPopup(item,12)" style="text-align: center;">明细</view>
						</view>
					 </view>
					</uni-list-item>
				</view>
			</uni-list>
		</view>
		<!-- <view class="mask" v-show="maskShow">
			<view class="bg"></view>
			<view class="container">
				<view class="cont">
					<view class="tit">月度绩效评价汇总表</view>
					<view style="max-height: 500px;overflow: auto;">
						<view class="show" v-for="index in 5" :key="index">
							<view>{{table.tableTit[index-1]}}</view>
							<ot-table
								textAlign="left" 
								titleTextAlign="center" 
								:tableData="table.tableData[index-1]" 
								:columns="table.tableColumns[index-1]"
							>
							</ot-table>
						</view>
					</view>
					<view class="margin flex justify-end" @click="cancel">
						<a class="cancel-btn">关闭</a>
					</view>
				</view>
			</view>
		</view> -->
		<uni-popup id="popup" ref="popup" :type="'center'">
			<view class="popup-cotent padding">
				<view class="popup-item padding">
					<text class="popup-text">年度</text>
					<picker @change="yearChange" mode="selector" :range="yearList" :value="yearIndex">
						<view class="popup-select">{{ yearList.length >0 ? yearList[yearIndex] : '请选择'}}</view>
					</picker>
					<uni-icons :size="20" class="uni-icon-wrapper" color="#bbb" type="arrowright" />
				</view>
				<view class="popup-item padding">
					<text class="popup-text">关键字</text>
					<input class="popup-input" type="text" placeholder="请输入查询关键字" v-model="keyword" />
					<!-- <input class="popup-input" type="text" disabled="true" v-model="keyword" @click="showUserNameHandle" />
					<uni-icons :size="20" class="uni-icon-wrapper" color="#bbb" type="arrowright" /> -->
				</view>			
				<view class="margin flex justify-end">
					<a class="cancel-btn" @click="searchSave">确定</a>
					<a class="cancel-btn" @click="searchCancel">取消</a>
				</view>
			</view>
		</uni-popup>
		<view class="showUserPopup" v-show="showUserName">
			<view class="bar">
				<view class="back" @click="backHandle">返回</view>
			</view>
			<view class="om_hd_fix">
					<uni-search-bar 
					bgColorCls="bg-steelblue" 
					cancelColor="text-white"
					placeholder="请输入姓名、岗位等关键字查询" 
					:focus="true" 
					@confirm="confirmKey">
				 </uni-search-bar>
			</view>
		</view>
		<tui-scroll-top :scrollTop="scrollTop" style="background: rgba(124, 174, 255, 0.5)"></tui-scroll-top>
	</om-page>
</template>

<script>
	import { ignoreHtml } from '@/static/js/common.js';
	export default {
		data() {
			return {
				dataStatus: false,
				pageTotal: 1,
				pageNum: 1,
				pageSize: 20,
				scrollTop: 0,
				pageTitle:"绩效评分查询",
				dataList: [],
				keyword: '',
				year: '',
				columnList: [],
				// filterList: [{
				// 	title: '年度',
				// 	defaultTitle: '年度',
				// 	detailTitle: '请选择年度',
				// 	key: 'year',
				// 	isSort: true,
				// 	reflexTitle: true,
				// 	defaultSelectedIndex: 0,
				// 	detailList: [{
				// 		'title': '不限',
				// 		'value': ''
				// 	}]
				// },{
				// 	title: '查询',
				// 	defaultTitle: '查询',
				// 	placeholder: '请输入关键字查询',
				// 	handle: 'getDataList',
				// 	key: 'keyWord',
				// 	isSearchs: true,
				// 	reflexTitle: true,
				// 	defaultSelectedText: '',
				// 	defaultSelectedValue: '',
				// 	detailList: [{
				// 		'title': '查询',
				// 		'value': ''
				// 	}]
				// }],
				// table: {
				// 	tableTit: ["指标运营","工作项","工作质量与行为评价","主观评价","合计与汇总"],
				// 	tableData:[],
				// 	tableColumns: [[],[],[],[],[]]
				// },
				// maskShow: false,
				yearList: [],
				yearIndex: 0,
				showUserName: false,
				zkeyword: '',
				zyear: '',
			};
		},
		provide() {
			return {
				searchKey: this
			}
		},
		methods: {
			calcBgColor(item) {
				return this.ColorList[3].name
			},
			getoLink(item){
				let _that = this;
				let title = ignoreHtml(item.userName)

				let arr = [];
				arr.push({
					name: '年度',
					value: item.year
				})
				for(let i=0; i<_that.columnList.length; i++){
					let obj = {};
					obj.name = _that.columnList[i].title
					if(typeof(item[_that.columnList[i].field]) == "string"){
						obj.value = ignoreHtml(item[_that.columnList[i].field])
					}else{
						obj.value = item[_that.columnList[i].field]
					}
					arr.push(obj)
				}
				_that.om.getPageInfo(arr, title, {});
			},
			getDataList(){
				let _that = this;
				_that.om.request("temployee/getEmpEvaluateCount",{
					page: _that.pageNum,
					rows: _that.pageSize,
					year: _that.zyear,
					searchLike: _that.zkeyword
				}).then(res=>{
					for(let i=0; i<res.rows.length; i++){
						res.rows[i].userName = ignoreHtml(res.rows[i].userName)
						res.rows[i].data1 = ignoreHtml(res.rows[i].data1)
						res.rows[i].data2 = ignoreHtml(res.rows[i].data2)
						res.rows[i].data3 = ignoreHtml(res.rows[i].data3)
						res.rows[i].data4 = ignoreHtml(res.rows[i].data4)
						res.rows[i].data5 = ignoreHtml(res.rows[i].data5)
						res.rows[i].data6 = ignoreHtml(res.rows[i].data6)
						res.rows[i].data7 = ignoreHtml(res.rows[i].data7)
						res.rows[i].data8 = ignoreHtml(res.rows[i].data8)
						res.rows[i].data9 = ignoreHtml(res.rows[i].data9)
						res.rows[i].data10 = ignoreHtml(res.rows[i].data10)
						res.rows[i].data11 = ignoreHtml(res.rows[i].data11)
						res.rows[i].data12 = ignoreHtml(res.rows[i].data12)
					}
					
					_that.dataList = _that.dataList.concat(res.rows)
					_that.dataStatus = true
					_that.pageTotal = res.totalPage
				})
			},
			getColumnList(){
				let _that = this;
				_that.om.request("ttableColumn/getGridModel",{
					tableMark: 'KEY_359'
				}).then(res=>{
					if(res.succeed){
						_that.columnList = res.value.frozenColumns[0] ? res.value.frozenColumns[0].concat(res.value.columns[0]) : res.value.columns[0];
					}else{
						_that.om.toast(res.msg)
					}
				})
			},
			// onChangeFilter(data){
			// 	let _that = this;
			// 	if(_that.year != data.year || _that.keyword != data.keyWord){
			// 		_that.dataList = []
			// 		_that.pageNum = 1
			// 	}
				
			// 	_that.year = data.year
			// 	_that.keyword = data.keyWord == '查询' ? '' : data.keyWord
			// 	_that.getDataList()
			// },
			changeArr(ntit, nval, data){
				let arr=[];
				for(let i=0; i<data.length; i++){
					let obj = {}
					obj[ntit] = data[i]
					obj[nval] = data[i]
					arr.push(obj)
				}
				return arr;
			},
			openPopup(item,index){
				let _that = this;
				// _that.om.request("monthMeritsEvaluateSummary/getData",{
				// 	year: _that.year,
				// 	month: index,
				// 	userId: item.userId
				// },'post').then(res=>{
				// 	let arr1 = res.value.indexResponses || []
				// 	let arr2 = res.value.workResponses || []
				// 	let arr3 = res.value.behaviorResponses || []
				// 	let arr4 = res.value.subjectResponses || []
				// 	let arr5 = res.value.totalResponse || []
				// 	_that.table.tableData = [arr1,arr2,arr3,arr4,arr5]
				// 	_that.maskShow = true
				// })
				_that.om.request("tperformanceEvaluate/getDataByYearMonthUserId",{
					year: _that.zyear,
					month: index,
					userId: item.userId
				},'post').then(res=>{
					let fileCode = res.value.tperformanceEvaluate.code
					let busCode = res.value.tperformanceEvaluate.busCode
					_that.om.getFormInfoByFileCode(fileCode, busCode)
				})
			},
			// cancel(){
			// 	this.table.tableData = []
			// 	this.maskShow = false
			// },
			searchHandle(){
				this.$refs.popup.open()
			},
			yearChange(e){
				this.yearIndex = e.detail.value
				this.year = this.yearList[this.yearIndex]
			},
			showUserNameHandle(){
				this.showUserName = true
			},
			searchSave(){
				this.$refs.popup.close()
				this.zkeyword = this.keyword
				this.zyear = this.year
				this.dataList = []
				this.pageNum = 1
				this.getDataList()
			},
			searchCancel(){
				this.$refs.popup.close()
			},
			backHandle(){
				this.showUserName = false
			},
			confirmKey(e){
				let _that = this
				if (e.value) {
				  if (!_that.keyword || (_that.keyword && _that.keyword != e.value.trim())) {
					_that.keyword = e.value.trim()
					_that.showUserName = false
				  }
				} else {
				  _that.keyword = ''
				  _that.showUserName = false
				}
			}
		},
		onLoad(data) {
			let _that = this;
			
			uni.setNavigationBarTitle({
				title: '绩效评分查询'
			});
			
			let arr = [_that.om.request("temployee/getYearList",{},'post'),
				// _that.om.request("ttableColumn/getGridModel",{
				// 	tableMark: 'KEY_344'
				// }),
				// _that.om.request("ttableColumn/getGridModel",{
				// 	tableMark: 'KEY_345'
				// }),
				// _that.om.request("ttableColumn/getGridModel",{
				// 	tableMark: 'KEY_346'
				// }),
				// _that.om.request("ttableColumn/getGridModel",{
				// 	tableMark: 'KEY_347'
				// }),
				// _that.om.request("ttableColumn/getGridModel",{
				// 	tableMark: 'KEY_360'
				// }),
			]
			//多个AJAX全部完成时开始执行
			Promise.all(arr).then(res => {
				// _that.filterList[0].detailList = _that._.cloneDeep(_that.changeArr('title', 'value', res[0].value))
				// _that.filterList[0].defaultSelectedIndex = res[0].value.length > 0 ? res[0].value.length - 1 : 0
				// _that.year = _that.filterList[0].detailList[_that.filterList[0].defaultSelectedIndex].value
				// _that.$refs.slFilter.resetMenuList(_that.filterList)
				_that.yearList = res[0].value;
				_that.yearIndex = _that.yearList.length-1
				_that.year = _that.yearList[_that.yearIndex]
				_that.zyear = _that.year
				
				_that.getColumnList()
				_that.getDataList()
				
				// let columnList1 = res[1].value.frozenColumns[0] ? res[1].value.frozenColumns[0].concat(res[1].value.columns[0]) : res[1].value.columns[0];
				// let columnList2 = res[2].value.frozenColumns[0] ? res[2].value.frozenColumns[0].concat(res[2].value.columns[0]) : res[2].value.columns[0];
				// let columnList3 = res[3].value.frozenColumns[0] ? res[3].value.frozenColumns[0].concat(res[3].value.columns[0]) : res[3].value.columns[0];
				// let columnList4 = res[4].value.frozenColumns[0] ? res[4].value.frozenColumns[0].concat(res[4].value.columns[0]) : res[4].value.columns[0];
				// let columnList5 = res[5].value.frozenColumns[0] ? res[5].value.frozenColumns[0].concat(res[5].value.columns[0]) : res[5].value.columns[0];
				// let narr1 = []
				// for(let i=0;i<columnList1.length;i++){
				// 	let obj = {
				// 		title: ignoreHtml(columnList1[i].title),
				// 		key: columnList1[i].field,
				// 		width: columnList1[i].width+140,
				// 	}
				// 	narr1.push(obj)
				// }
				// let narr2 = []
				// for(let i=0;i<columnList2.length;i++){
				// 	let obj = {
				// 		title: ignoreHtml(columnList2[i].title),
				// 		key: columnList2[i].field,
				// 		width: columnList2[i].width+140,
				// 	}
				// 	narr2.push(obj)
				// }
				// let narr3 = []
				// for(let i=0;i<columnList3.length;i++){
				// 	let obj = {
				// 		title: ignoreHtml(columnList3[i].title),
				// 		key: columnList3[i].field,
				// 		width: columnList3[i].width+50,
				// 	}
				// 	narr3.push(obj)
				// }
				// let narr4 = []
				// for(let i=0;i<columnList4.length;i++){
				// 	let obj = {
				// 		title: ignoreHtml(columnList4[i].title),
				// 		key: columnList4[i].field,
				// 		width: columnList4[i].width+80,
				// 	}
				// 	narr4.push(obj)
				// }
				// let narr5 = []
				// for(let i=0;i<columnList5.length;i++){
				// 	let obj = {
				// 		title: ignoreHtml(columnList5[i].title),
				// 		key: columnList5[i].field,
				// 		width: columnList5[i].width+80,
				// 	}
				// 	narr5.push(obj)
				// }
				// _that.table.tableColumns = [narr1,narr2,narr3,narr4,narr5]
			})
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			let _that = this;
			if(_that.pageTotal>_that.pageNum){
				_that.pageNum++
				_that.getDataList()
			}
		}
	};
</script>

<style>
	.zbbtn{
		float: right;
		width: 64px; 
		height: 28px;
		line-height: 28px;
		font-size: 12px;
		display: inline-block;
		margin: 0 5px;
		margin-right: 20px;
	}
	.popup-item{
		height:50px;
		background-color: #FFFF;
		font-size: 16px;
		text-align: center;
		border-bottom: 1px solid #EEEEEE;
		display: flex;
		justify-content: space-between;
	}
	.popup-cotent{
		width: 300px;
		background-color: white;
		border-radius: 10px;
	}
	.popup-tip{
		font-size: 16px;
		color:#b0b0b0 ;
	}
	.table-data{
		/* overflow: hidden; */
		/* width: 270px; */
		/* position: relative; */
		/* display: block; */
		width: 270px;
		max-height: 160px;
		overflow: auto;
	}
	.cancel-btn{
		text-align: center;
		display: block;
		color: #0081ff;
		background-color: #cce6ff;
		height: 36px;
		line-height: 36px;
		width: 72px;
		margin: 15px auto 0;
	}
	.desc-chart{
		position: fixed;
		top: 0;
		/* line-height: 50px;
		padding: 0 15px; */
		font-size: 14px;
		border-bottom: #EEEEEE 1px solid;
		/* display: flex; */
		z-index: 99;
		width: 100%;
	}
	.allchart{
		width: 100%;
	}
	.allchart a{
		float: right;
		display: block;
		width: 68px;
		height: 26px;
		line-height: 26px;
		text-align: center;
		display: block;
		color: #000;
		background-color: #fff;
		margin: 12px 15px 12px 4px;
	}
	.nodata{
		width: calc(100% - 30px);
		margin: 72px 15px 0;
		height: 26px;
		line-height: 26px;
		background: none;
		text-align: center;
	}
	.mask{
		position: fixed;
		z-index: 99;
	}
	.mask .bg{
		opacity: 1;
	    position: fixed;
	    bottom: 0px;
	    top: 0px;
	    left: 0px;
	    right: 0px;
	    background-color: rgba(0, 0, 0, 0.4);
	    transition: opacity 300ms ease 0ms, -webkit-transform 300ms ease 0ms, transform 300ms ease 0ms;
	    transform-origin: 50% 50% 0px;
	}
	.mask .container{
		transform: scale(1);
		opacity: 1;
		position: fixed;
		display: flex;
		flex-direction: column;
		bottom: 0px;
		left: 0px;
		right: 0px;
		top: 0px;
		justify-content: center;
		align-items: center;
		transition: opacity 300ms ease 0ms, -webkit-transform 300ms ease 0ms, transform 300ms ease 0ms;
		transform-origin: 50% 50% 0px;
	}
	.mask .container .cont{
		width: 300px;
		background-color: white;
		border-radius: 10px;
		padding: 15px;
		box-sizing: border-box;
	}
	.mask .container .cont .tit{
		font-size: 16px;
		color: #b0b0b0;
		margin: 15px;
	}
	.mask .container .cont .show{
		
	}
	.desw{
		float: left;
	}
	.popup-text{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 80px;
	}
	.popup-select{
		border: 0;
		width: 150px;
		height: 19px;
		line-height: 19px;
		background: none;
		appearance: none;
		text-align: right;
		text-align-last: right;
		font-size: 16px;
	}
	.popup-input{
		text-align: right;
	}
	.showUserPopup{
		position: fixed;
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		z-index: 9998;
		background: #FFF;
	}
	.showUserPopup .bar{
		background-color: #fff;
		height: 36px;
		padding-left: 10px;
		padding-right: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		border-bottom-width: 0.5px !important;
		border-bottom-style: solid;
		border-bottom-color: #f5f5f5;
		font-size: 16px;
		color: #757575;
		line-height: 1;
	}
</style>                                                  
                                                                                    